<template>
  <div class="StudentList">
    <!-- 查询 重置 功能 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 分页  1: 1-10 2:11-20 slice((当前页数-1)*每页条数,当前页数*当前条数) -->
    <!-- <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> -->
      <el-table :data="compTableData" border style="width: 100%" :tooltip-effect="'dark'">
        <el-table-column prop="name"  label="姓名" align="center" width="100px"></el-table-column>
        <el-table-column prop="sex_text"  label="性别" align="center" width="60px"></el-table-column>
        <el-table-column prop="age"  label="年龄" align="center" width="60px"></el-table-column>
        <el-table-column prop="number"  label="学号" align="center" width="60px"></el-table-column>
        <el-table-column prop="class"  label="班级" align="center" width="60px"></el-table-column>
        <el-table-column prop="state_text"  label="状态" align="center" width="80px"></el-table-column>
        <el-table-column prop="address"  label="地址" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="phone"  label="联系方式" align="center" width="120px"></el-table-column>
        <el-table-column  label="操作" align="center" width="60px">
           <template slot-scope="scope">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
           </template>
        </el-table-column>
      </el-table>
      <Pagination2 :total="total" :url="url" :pageSize="pageSize"
      :currentPage="currentPage"  @handleChange="handleSizeCurrentPage" />
  </div>
</template>
<script>
import Pagination2 from '@/components/common/Pagination2.vue'
// 报错  name 的问题  一般是 标签闭合错了  还有就是 标签写错了
import {students,studentsDel} from '@/api/api.js'
import {getStudentData} from '@/utils/table.js'
export default{
  name:'StudentList2',
  components:{
    Pagination2
  },
  data(){
    return{
      url:'/StudentList2aaaa',  
      tableData:[],   
      formInline:{
        name:''
      },
      total: 0, // 数据总数
      currentPage:1,  // 当前页数 
      pageSize:10,  // 每页条数
    }
  },
  // 父组件获取表格所有的数据  pageSize currentPage 定义在父组件里在传给子组件
  // 表格所有的数据 通过computed处理  直接在父组件里渲染  子组件里 只做修改分页的方法  把新的参数传给父组件  父组件获取到通过计算获取新的表格数据
  // 直接在父组件里渲染
  created(){
     // 这里值执行一次
     // this.getStuData();  // getStudentData(this,'/students',{})  第三个参数 没有可以不传  或者 传 {} 也可以
     getStudentData(this,'/students')
  },
  computed:{
    // 数据只能放在父组件里面 处理  currentPage pageSize 设置在父组件里  把值传到子组件里去
    // computed 里用了 $nextTick 里面获取不到 this.tableData 的数据  不用 $nextTick 获取不到 this.$refs.Page 的值 
    compTableData(){
       return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },
  methods:{
    // 这个函数 只要 子组件里面的方法执行 就会自动执行
    handleSizeCurrentPage (pageSize, currentPage) {
      this.pageSize = pageSize
      this.currentPage = currentPage
    },
    // async getStuData(){
    //   const res =await students()
    //   if(res.data.status === 200){
    //     this.tableData = res.data.data
    //     this.total = res.data.total;
    //     this.$refs.Page.tableData = res.data.total
    //     this.tableData.forEach(item=>{
    //       // 尽量不要修改接口返回的原数据
    //       item.sex === 1? item.sex_text = '男':item.sex_text = '女'
    //       item.state === '1'?(item.state_text='已入学') :item.state === '2' ? (item.state_text = '未入学'):(item.state_text = '休学中')
    //     })
    //    }
    //  },
     async del(row){
        const res = await studentsDel(row.id)
        if(res.data.status === 200){
          this.$message({ message:'删除数据成功',type:'success'})
          getStudentData(this,'/students')
        }
     },
     // 查询
     query(){
        // 当显示最后一页时  如果查询的数据是 前面页里面的数据  没有this.currentPage = 1; 会查不到数据 
        this.currentPage = 1;
        //this.getStuData(this.formInline) 
        getStudentData(this,'/students',this.formInline)
     },
     reset(){
       //this.formInline ={}
       //this.getStuData(this.formInline) 
       getStudentData(this,'/students')
     }
  }
}

</script>


<style lang="scss" scoped>
.StudentList{
.el-pagination{
    margin-top:20px;
  }
}
</style>